<template>
	<div>
		<el-form :inline="true"  style="padding-top: 10px;padding-left: 5px;">
			<el-form-item label="起止日期" prop="startandend" label-width="80px">
				<el-date-picker v-model="startandend" type="daterange" value-format="yyyy-MM-dd"  @change="changedate" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions2">
				</el-date-picker>
			</el-form-item>
			<el-form-item label="查询类别" prop="stype" label-width="80px">
				<el-select clearable v-model="stype" placeholder="请选择" style="width: 120px;">
					<el-option v-for="item in stypedata" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<div style="float: left;">
					<el-button type="primary" @click="querybutton">查询</el-button>
				</div>
			</el-form-item>
		</el-form>
		
		<table style="width: 100%;">
			<tr style="height: 100px;text-align: center;">
				<td style="background:hotpink;width: 33%;"><span style="font-size: 40px;">{{ ordernum }}</span><br/>订单总数</td>
				<td style="background:#409EFF;width: 33%;"><span style="font-size: 40px;">{{ goodsnum }}</span><br/>商品总数</td>
				<td style="background:aquamarine;width: 33%;"><span style="font-size: 40px;">{{ amount }}</span><br/>总金额</td>
			</tr>
		</table>
		<br />
		<el-table :data="ordersData" v-if="stype==1" showOverflowTooltip style="width: 100%" stripe border
		   tooltip-effect="dark" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" 
		   element-loading-background="rgba(0,0,0,0.8)">
			<!--<el-table-column type="selection" width="50" > </el-table-column>-->
			<el-table-column prop="user_name" label="客户名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="order_id" label="订单编号" show-overflow-tooltip></el-table-column>
			<!-- <el-table-column prop="state" label="状态" show-overflow-tooltip></el-table-column> -->
			<el-table-column prop="create_time" label="下单时间" show-overflow-tooltip></el-table-column>
			<el-table-column prop="goods_id" label="商品编码" show-overflow-tooltip></el-table-column>
			<el-table-column prop="goods_name" label="商品名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="size_name" label="尺码名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="color_name" label="颜色" show-overflow-tooltip></el-table-column>
			<el-table-column prop="record_quantity" label="数量" show-overflow-tooltip></el-table-column>
			<el-table-column prop="price" label="单价" show-overflow-tooltip></el-table-column>
			<el-table-column prop="record_price" label="小计金额" show-overflow-tooltip></el-table-column>
		</el-table>
		
		<el-table :data="ordergoodsData" v-if="stype==2" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark">
			<!--<el-table-column type="selection" width="50" > </el-table-column>-->
			<el-table-column prop="goods_id" label="商品编码" show-overflow-tooltip></el-table-column>
			<el-table-column prop="goods_name" label="商品名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="size_name" label="尺码名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="color_name" label="颜色" show-overflow-tooltip></el-table-column>
			<el-table-column prop="数量" label="数量" show-overflow-tooltip></el-table-column>
			<el-table-column prop="单价" label="单价" show-overflow-tooltip></el-table-column>
			<el-table-column prop="金额" label="小计金额" show-overflow-tooltip></el-table-column>
		</el-table>
		
		<el-table :data="ordersuserData" v-if="stype==3" showOverflowTooltip style="width: 100%" stripe border tooltip-effect="dark">
			<!--<el-table-column type="selection" width="50" > </el-table-column>-->
			<el-table-column prop="user_name" label="客户名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="goods_id" label="商品编码" show-overflow-tooltip></el-table-column>
			<el-table-column prop="goods_name" label="商品名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="size_name" label="尺码名称" show-overflow-tooltip></el-table-column>
			<el-table-column prop="color_name" label="颜色" show-overflow-tooltip></el-table-column>
			<el-table-column prop="数量" label="数量" show-overflow-tooltip></el-table-column>
			<el-table-column prop="单价" label="单价" show-overflow-tooltip></el-table-column>
			<el-table-column prop="金额" label="小计金额" show-overflow-tooltip></el-table-column>
		</el-table>
	</div>
</template>

<script>
	import { get_order_goods_statistics,get_statistics,get_order_goods_statisticsgoods,get_order_goods_statisticsuser } from '../../api/report.js'
	export default {
		data() {
			return {
				ordersData:[],
				ordergoodsData:[],
				ordersuserData:[],
				tempstring:'',
				startandend:[],
				stype:'1',
				pickerOptions2: {},
				stypedata:[
					{'label':'明细','value':'1'},
					{'label':'商品','value':'2'},
					{'label':'客户','value':'3'}
				],
				ordernum:0,
				goodsnum:0,
				amount:0,
				statisticsData:[],
				loading:true
			};
		},
		methods:{
			get_order_goodsList() {
			  get_order_goods_statistics({parameter:this.startandend[0],parameter2:this.startandend[1]}).then(response => {
			    this.ordersData = response;
				this.loading = false;
				// console.log( this.ordersData,' this.ordersData')
			  })
			}, 
			get_order_goods_statisticsgoodsData() {
			  get_order_goods_statisticsgoods({parameter:this.startandend[0],parameter2:this.startandend[1]}).then(response => {
				  console.log(response,'response')
			    this.ordergoodsData = response;
				console.log(this.startandend[0],this.startandend[1], this.ordergoodsData,' this.ordergoodsData')
			  })
			},
			get_order_goods_statisticsuserData() {
			  get_order_goods_statisticsuser({parameter:this.startandend[0],parameter2:this.startandend[1]}).then(response => {
			    this.ordersuserData = response;
				// console.log( this.ordersData,' this.ordersData')
			  })
			},
			get_statisticsData() {
			  get_statistics({parameter:this.startandend[0],parameter2:this.startandend[1]}).then(response => {
			    this.statisticsData = response;
				// console.log( this.ordersData,' this.ordersData')
				this.ordernum = this.statisticsData[0].订单数;
				this.goodsnum = this.statisticsData[0].商品总数;
				this.amount = this.statisticsData[0].总金额;
			  })
			},
			changedate(){
				
			},
			querybutton(){
				this.ordersData = [];
				this.ordergoodsData = [];
				this.ordersuserData = [];
				this.statisticsData = [];
				this.ordernum = 0;
				this.goodsnum = 0;
				this.amount = 0;
				this.loading = true;
				this.get_statisticsData();
				this.get_order_goodsList();
				this.get_order_goods_statisticsgoodsData();
				this.get_order_goods_statisticsuserData();
			},
			showExport(){
				
			},
			
		},
		created() {
			let date = new Date();
			let startdate = '';
			let nowdate = '';
			startdate = (date.getFullYear()+ '-' + ((date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)) + '-' + '01').toString();
			nowdate = (date.getFullYear()+ '-' + ((date.getMonth()+1)<10?'0'+(date.getMonth()+1):(date.getMonth()+1)) + '-' + ((date.getDate())<10?'0'+(date.getDate()):(date.getDate()))).toString();
			this.startandend.push(startdate);
			this.startandend.push(nowdate);
			this.querybutton();
		}
	}
</script>

<style>

</style>
